Namespace("sketch.ui.iphone");

(function(fwk, ui) {
    var CIRCLE_SIZE = 6;
    var MARGIN = 20;
    var CIRCLE_SPACE = 16;
    ui.iphone.PageIndicator = klass(fwk.UIElement, (function(){
        return {
            _constructor:function() {
                this.properties.createProperty("pageNumber", "Page number", 3).useInModel().editorTemplate("#editor-textbox");
                this.properties.createProperty("currentPage", "Current page", 1).useInModel().editorTemplate("#editor-textbox");

                this.init({
                    height:28,
                    width: 88
                });

                this.clipSelf(true);

                this._inactiveColor = '#3E3E3E';
                this._activeColor = '#FFFFFF';
            },
            resizeDimensions:function(){
                return fwk.ResizeDimension.Horizontal;
            },
            drawSelf:function(context){
                var y = this.top() + this.height()/2;
                var x = this.left();

                var currentPage = this.currentPage();
                for(var i = 0; i < this.pageNumber(); ++i){
                    if(currentPage == i){
                        context.fillStyle = this._activeColor;
                    }else{
                        context.fillStyle = this._inactiveColor;
                    }
                    context.circle(x + MARGIN + i * CIRCLE_SPACE, y, CIRCLE_SIZE/2);
                    context.fill();
                }
            },
            pageNumber:function(value){
                return this.properties.pageNumber(value);
            },
            currentPage:function(value){
                return this.properties.currentPage(value);
            }
        };
    })());
})(sketch.framework, sketch.ui);